import { FormDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.formStatus);

## Touched and dirty state

`form.isTouched` and `form.isDirty` fields provide information about current field status:

- Field is considered to be `touched` when user focused it or its value was changed programmatically with `form.setFieldValue` handler
- Field is considered to be `dirty` when its value was changed and new value is different from field value specified in `initialValues` (compared with [fast-deep-equal](https://www.npmjs.com/package/fast-deep-equal))

<Demo data={FormDemos.status} />

## isTouched and isDirty functions

```tsx
import { useForm } from "@mantine/form";

const form = useForm({
  mode: "uncontrolled",
  initialValues: { a: 1, nested: { field: "" } },
});

// Provide path as first argument to get state of single field
form.isTouched("a"); // -> was field 'a' focused or changed?
form.isDirty("a"); // -> was field 'a' modified?
form.isDirty("nested.field"); // -> nested fields are also supported

// If field path is not provided,
// then functions will return form state instead
form.isTouched(); // -> was any field in form focused or changed?
form.isDirty(); // -> was any field in form modified?
```

## Initial values

You can provide initial touched and dirty values with `initialTouched` and `initialDirty` properties.
Both properties support [the same fields path format as errors](/form/errors/):

```tsx
import { useForm } from "@mantine/form";

const form = useForm({
  mode: "uncontrolled",
  initialValues: { a: 1, nested: { field: "" } },
  initialTouched: { a: true, "nested.field": true },
  initialDirty: { a: true, "nested.field": true },
});
```

## resetTouched and resetDirty

`form.resetTouched` and `form.resetDirty` functions will make all fields clean and untouched.
Note that `form.reset` will also reset `touched` and `dirty` state:

```tsx
import { useForm } from "@mantine/form";

const form = useForm({
  mode: "uncontrolled",
  initialValues: { a: 1 },
  initialTouched: { a: true },
  initialDirty: { a: true },
});

form.isDirty("a"); // -> true
form.isTouched("a"); // -> true

form.resetTouched();
form.isTouched("a"); // -> false

form.resetDirty();
form.isDirty("a"); // -> false
```

To reset values that are used for dirty check call `form.resetDirty` with new values:

```tsx
import { useForm } from "@mantine/form";

const form = useForm({
  mode: "uncontrolled",
  initialValues: { a: 1 },
});

form.setValues({ a: 2 });
form.isDirty(); // -> true

form.resetDirty({ a: 2 });
form.isDirty(); // -> false

form.setValues({ a: 3 });
form.isDirty(); // -> true
```
